<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>tabBar</h1>
					<div id="box1" class="box">
						<h2>1. 创建 tabBar 分支</h2>
						<p>运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：</p>
						<div class="code">
							<code-mirror :value="code.code1" :options="cmOptions"> </code-mirror>
						</div>
					</div>
					<div id="box2" class="box">
						<h2>2. 创建 tabBar 页面</h2>
						<div class="item" id="box2-1">
							<p>在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX
								中，可以通过如下的两个步骤，快速新建页面：</p>
							<ol>
								<li>在 pages 目录上鼠标右键，选择新建页面</li>
								<li>
									<p>在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下：</p>
									<el-image style="width: 100%;" :src="srcList[0]" fit="contain"
										:preview-src-list="srcList">
									</el-image>
								</li>
							</ol>
						</div>
					</div>
					<div id="box3" class="box">
						<h2>3. 配置 tabBar 效果</h2>
						<ol>
							<li>
								<p>将 资料 目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹</p>
							</li>
							<li>
								<p>修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：</p>
								<div class="code">
									<code-mirror :value="code.code2" :options="cmOptions"> </code-mirror>
								</div>
							</li>
						</ol>
					</div>
					<div id="box4" class="box">
						<h2>4. 删除默认的 index 首页</h2>
						<ol>
							<li>在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉</li>
							<li>同时，把 page.json 中记录的 index 首页 路径删除掉</li>
							<li>为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件夹</li>
							<li>同时，把 components 目录下的 uni-link 组件文件夹 删除掉</li>
						</ol>
					</div>
					<div class="box" id="box5">
						<h2>5. 修改导航条的样式效果</h2>
						<ol>
							<li>
								<p>打开 pages.json 这个全局的配置文件</p>
							</li>
							<li>
								<p>修改 globalStyle 节点如下：</p>
								<div class="code">
								<code-mirror :value="code.code3" :options="cmOptions"> </code-mirror>
								</div>
							</li>
						</ol>
					</div>
					<div id="box6" class="box">
						<h2>6. 分支的提交与合并</h2>
						<ol>
							<li>
								<p>将本地的 tabbar 分支进行本地的 commit 提交：</p>
								<div class="code">
									<code-mirror :value="code.code4" :options="cmOptions"> </code-mirror>
								</div>
							</li>
							<li>
								<p>将本地的 tabbar 分支推送到远程仓库进行保存：</p>
								<div class="code">
									<code-mirror :value="code.code5" :options="cmOptions"> </code-mirror>
								</div>
							</li>
							<li>
								<p>将本地的 tabbar 分支合并到本地的 master 分支：</p>
								<div class="code">
									<code-mirror :value="code.code6" :options="cmOptions"> </code-mirror>
								</div>
							</li>
							<li>
								<p>删除本地的 tabbar 分支：</p>
								<div class="code">
									<code-mirror :value="code.code7" :options="cmOptions"> </code-mirror>
								</div>
							</li>
						</ol>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer'  :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 创建 tabBar 分支" />
					<a-anchor-link href="#box2" title="2. 创建 tabBar 页面" />
					<a-anchor-link href="#box3" title="3. 配置 tabBar 效果" />
					<a-anchor-link href="#box4" title="4. 删除默认的 index 首页" />
					<a-anchor-link href="#box5" title="5. 修改导航条的样式效果" />
					<a-anchor-link href="#box6" title="6. 分支的提交与合并"/>
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import img1 from '@/assets/img2/img2-1.png'
	import {tabbar} from '../../util/code.js'
	export default {
		name: 'startView',
		data() {
			return {
				srcList: [
					img1
				],
				code:tabbar,
				cmOptions: {
					mode: "text/javascript",
					theme: "base16-dark"
				},
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
